<template>
	<div class="MyTeam">
		<v-header></v-header>
		<div class="myteam-top">
			<div class="myteam-top-img">
			</div>
			<div class="myteam-top-content">
				<div class="total-people">{{$t("my.TeamTotalNumber")}}：{{teamTotal}} {{$t("my.People")}}</div>
				<div class="total-money">{{$t("my.TeamHolding")}}：{{teamMoneyTotal}}</div>
			</div>
		</div>
		<div class="tabs-bar">
			<div class="tabs-bar-nav">
				<div class="tabs-tab" v-for="(item,index) in tabsParam" :class="[nowIndex == index ? 'tabs-active' : '']" @click="toggleTabs(index)">
					{{item.level}}({{item.number}})
				</div>
			</div>
		</div>
		<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
			<div class="tabs-content">
				<div class="divTab" v-show="nowIndex===0">
					<ul>
						<li v-if="isShow">
							<div class="no-data">
								暂无数据！
							</div>
						</li>
						<li v-if="items!=''" v-for="item in items">
							<h3>{{ item.memberCode }}（<font color="#007AFF">{{ item.realName }}</font>）</h3>
							<p>持币数：{{ item.walleIncrease }}</p>
						</li>
					</ul>
				</div>
				<div class="divTab" v-show="nowIndex===1">
					<ul>
						<li v-if="isShow">
							<div class="no-data">
								暂无数据！
							</div>
						</li>
						<li v-if="items!=''"v-for="item in items">
							<h3>{{ item.memberCode }}（<font color="#007AFF">{{ item.realName }}</font>）</h3>
							<p>持币数：{{ item.walleIncrease }}</p>
						</li>
					</ul>
				</div>
				<div class="divTab" v-show="nowIndex===2">
					<ul>
						<li v-if="isShow">
							<div class="no-data">
								暂无数据！
							</div>
						</li>
						<li v-if="items!=''" v-for="item in items">
							<h3>{{ item.memberCode }}（<font color="#007AFF">{{ item.realName }}</font>）</h3>
							<p>持币数：{{ item.walleIncrease }}</p>
						</li>
					</ul>
				</div>
				<div class="divTab" v-show="nowIndex===3">
					<ul>
						<li v-if="isShow">
							<div class="no-data">
								暂无数据！
							</div>
						</li>
						<li v-if="items!=''" v-for="item in items">
							<h3>{{ item.memberCode }}（<font color="#007AFF">{{ item.realName }}</font>）</h3>
							<p>持币数：{{ item.walleIncrease }}</p>
						</li>
					</ul>
				</div>
				<div class="divTab" v-show="nowIndex===4">
					<ul>
						<li v-if="isShow">
							<div class="no-data">
								暂无数据！
							</div>
						</li>
						<li v-if="items!=''" v-for="item in items">
							<h3>{{ item.memberCode }}（<font color="#007AFF">{{ item.realName }}</font>）</h3>
							<p>持币数：{{ item.walleIncrease }}</p>
						</li>
					</ul>
				</div>
			</div>
		</mt-loadmore>
	</div>
</template>
<style>
	.MyTeam{margin-top: 4rem;}
	.MyTeam .myteam-top {position: fixed; width: 100%; z-index: 999;height:140px;box-sizing: border-box;margin:0 auto;background-image:url(../../../kbc/h5/img/css/index/myteam.png);background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}
	.MyTeam .myteam-top .myteam-top-img{text-align:left; height: 100px;}
	.MyTeam .myteam-top .myteam-top-img img{ width:80px; height:80px; border-radius: 50%;display: block;}
	.MyTeam .myteam-top .myteam-top-content{display: flex; box-sizing: border-box; text-align:center;color: #FFECEC;font-size: 1.2rem;height:45px;background-color: #000000;filter:alpha(Opacity=60);-moz-opacity:0.5;opacity: 0.5;}
	.MyTeam .myteam-top .myteam-top-content .total-people{width: 50%;flex: 1;height:45px;line-height: 45px;}
	.MyTeam .myteam-top .myteam-top-content .total-money{width: 50%;flex: 1;height:45px;line-height: 45px;}
	.MyTeam .mint-tab-item-label{font-size: 1.2rem;}
	.MyTeam .mint-navbar .mint-tab-item.is-selected{color:#00CC66;border-bottom:3px solid #00CC66}
	.MyTeam .mint-loadmore-content {margin-top: 180px;}
	.MyTeam .tabs-bar {
		border-bottom: 1px solid #CECECE;
		position: fixed;
		width: 100%;
		height: 45px;
		z-index: 999;
		margin-top: 140px;
		background: #FFFFFF;
	}
	
	.MyTeam .tabs-bar .tabs-bar-nav {
		display:table; 
		min-height: 45px;
		width: 100%;
		position: absolute;
		bottom: -1px;
	}
	
	.MyTeam .tabs-bar .tabs-bar-nav .tabs-tab {
		vertical-align:middle;   
  		display:table-cell;
		font-size: 1.2rem;
		position: relative;
		box-sizing: border-box;
		text-align: center;
		min-height: 45px;
		cursor: pointer;
		-moz-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}
	
	.MyTeam .tabs-bar .tabs-bar-nav .tabs-active {
		font-size: 1.2rem;
		border-bottom: 1px solid #007AFF;
		color: #007AFF;
	}
	
	.MyTeam .tabs-content {
		width: 100%;
		padding:5px 10px;
		box-sizing: border-box;
	}
	.MyTeam .tabs-content ul li{display: flex;border-bottom: 1px solid #CECECE;height: 45px;line-height: 45px;}
	.MyTeam .tabs-content ul li h3{font-size: 1.3rem;font-weight: 500;-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}
	.MyTeam .tabs-content ul li p{font-size: 1.3rem;font-weight: 700;color: #EF4F4F;}

</style>
<script>import router from './../../router';
import util from './../../js/util/util.js';
import vHeader from './../common/Header.vue';
import { Navbar, TabItem, Toast, Loadmore } from 'mint-ui';
export default {
	data() {
		return {
			tabsParam: [{'level': '1级','number': 0}, 
						{'level': '2级','number': 0}, 
						{'level': '3级','number': 0}, 
						{'level': '4级','number': 0}, 
						{'level': '5级','number': 0}], //（这个也可以用对象key，value来实现）
			nowIndex: 0, //默认第一个tab为激活状态
			Page: 1,
			level: 1,
			allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
			topStatus: '',
	        translate: 0,
	        isShow:false,
	        moveTranslate: 0,
			items: [],
			teamInfo: {},
			Level1: '0',
			Level2: '0',
			Level3: '0',
			Level4: '0',
			Level5: '0',
			teamTotal: '0',
			teamMoneyTotal: '0.0',
			currentPage: '0',
			totalPage: '0'

		};
	},
	components: { // 声明子组件
		Navbar,
		TabItem,
		Toast,
		Loadmore,
		vHeader
	},
	methods: {
		toggleTabs: function(index) {
			this.nowIndex = index;
			this.level = index+1;
			this.items = [];
			this.Page = 1;
			this.getTeamList();
		},
		getTeamList: function() { //请求数据
			let $this = this;
			$this.allLoaded = false;
			util.Ajax('/team/teamlist?level=' + $this.level + '&page=' + $this.Page, "GET", {}, function(data) { //成功
				if(data) {
					if(data.code == "0") {
						$this.isShow = false;
						//赋值
						$this.totalpage = data.teamInfoMap.totalPage;
						$this.cuurPage = data.teamInfoMap.currentPage;
						if($this.totalpage == 0){
							$this.isShow = true;
							return;
						}

						if($this.totalpage < $this.cuurPage) {
							$this.allLoaded = true;
							$this.$refs.loadmore.onBottomLoaded();
						}else{
							for (var i in data.teamInfoMap.teamlist) {
	                            $this.items.push(data.teamInfoMap.teamlist[i]);
	                        }
						}
						console.log($this.items);
						$this.$nextTick(function() {
							// 是否还有下一页，加个方法判断，没有下一页要禁止上拉
							$this.scrollMode = "touch";
							$this.isHaveMore();
						});
					} 
				}
			});
		},
		loadTop() { //下拉刷新
			//下拉加载
			this.items = [];
			this.Page = 1;
			this.getTeamList();
			this.$refs.loadmore.onTopLoaded(); // 固定方法，查询完要调用一次，用于重新定位
		},
		loadBottom() { //上拉加载更多数据
			this.Page += 1;
			this.getTeamList(); // 加载更多数据
			this.$refs.loadmore.onBottomLoaded();
		},
		isHaveMore: function() {
			// 是否还有下一页，如果没有就禁止上拉刷新
			//this.allLoaded = false; //true是禁止上拉加载
			if(this.cuurPage == this.totalpage) {
				Toast("没有更多数据了...");
				this.allLoaded = true;
			}
		}
	},
	created() {
		this.$store.state.headings=this.$router.history.current.name; //修改标题
	 	this.$store.state.isFooterShow=false; //显示底部导航
	},
	mounted: function() {
			let $this = this;
			util.Ajax('/team/teamInfo', "GET", {}, function(data) { //成功
				if(data) {
					if(data.code == "0") {
						//赋值
						$this.teamInfo = data.teamInfoMap;
						$this.teamTotal = $this.teamInfo.teamTotal;
						$this.teamMoneyTotal = $this.teamInfo.teamMoneyTotal;
						$this.Level1 = data.teamInfoMap.Level1;
						$this.Level2 = data.teamInfoMap.Level2;
						$this.Level3 = data.teamInfoMap.Level3;
						$this.Level4 = data.teamInfoMap.Level4;
						$this.Level5 = data.teamInfoMap.Level5;
						$this.tabsParam = [{'level': '1级','number': $this.Level1}, 
						{'level': '2级','number': $this.Level2}, 
						{'level': '3级','number': $this.Level3}, 
						{'level': '4级','number': $this.Level4}, 
						{'level': '5级','number': $this.Level5}];
						$this.getTeamList(); //加载1级团队
					} else {
						Toast(data.msg);
					}
				}
			});
		}
	}
</script>